<template>
    <input class="input" v-model="content" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script>
import { ref } from 'vue'
export default {
    props: ['modelValue'],

    setup(props) {
        const content = ref(props.modelValue)
        return { content }
    }
}
</script>

<style lang="scss" scoped>
.input {
    @apply bg-gray-100 hover:bg-gray-500 hover:text-white duration-500 border-none outline-none p-3;
}
</style>
